<template>
    <div class="m-integration-tab">
        <ul class="m-tabul">
            <li v-for="(item,index) in tabli" :key="index"
            :class="{'active':index==idx}"
            @click="setTab(index)">{{item}}</li>
        </ul>
        <ul class="m-tablist" v-if="idx==0">
            <li v-for="(item,index) in tabarr" :key="index"
            :class="{'on':tabidx==index}" @click="chooseTab1(index)">{{item}}</li>
        </ul>
        <ul class="m-tablist" v-if="idx==1">
            <li  v-for="(item,index) in tabarr2" :key="index"
            :class="{'on':tabidx2==index}" @click="chooseTab2(index)">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'',
    data () {
        return {
            tabli:['综合','兑换项目'],
            idx:2,
            tabarr:['综合','产品','项目','卡项'],
            tabarr2: ['兑换项目', '可兑换项目'],
            tabidx:0,
            tabidx2:0,
            sta:'',      //项目类别  ''综合，2项目，1产品，3卡项
            type:0,     //兑换方式 0兑换项目，1可兑换项目
        }
    },
    methods: {
        // 选择tab栏
        setTab(index) {
             this.idx = index;
        },
        //  选择tab内容
        chooseTab1(index) {
            this.idx = 2;
            this.tabidx = index;
            this.tabli[0] = this.tabarr[index];
            if(index==0){
                this.sta = '';
            }else{
                this.sta = index;
            }
            
            this.$emit('chooseTab',{sta:this.sta,type:this.type});
        },
        //  选择tab内容
        chooseTab2(index) {
            this.idx = 2;
            this.tabidx2 = index;
            this.tabli[1] = this.tabarr2[index];
            this.type = index;
            this.$emit('chooseTab',{sta:this.sta,type:this.type});
        }
    }
}
</script>
<style lang="less" scoped>
.m-integration-tab{
    position: relative;
    .m-tablist{
        position: absolute;
        top: 1;
        z-index: 2;
        left: 0; right: 0;
        z-index: 2;
        background: white;
        li{
            border-top: 1px solid @background-gray;
            padding: .6rem .9rem;
            &.on{
                color: @primary-green;
            }
        }
    }
}
.m-tabul{
    .flex;
    li{
        flex:1;
        text-align: center;
        position: relative;
        height: 2.6rem;
        line-height: 2.6rem;
        &::after{
            position: absolute;
            content: '';
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            width: 0; height: 0;
            border-top: .4rem solid @light-gray;
            border-left: .4rem solid transparent;
            border-right: .4rem solid transparent;
            
        }
        &.active{
            color: @primary-green;
            &::after{
                border-top-color: @primary-green;
            }
        }
    }
}
</style>
